// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/button';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '../../protocol/components/custom-menu-list';
@import '../../protocol/components/sub-navigation';

// * -------------------------------------------------------------------------- */
// Generic Container Styles

.cta-container {
    margin-bottom: 0;

    & > .mzp-c-button-download-container {
        display: inline-block;
    }
}

.enterprise-section {
    margin-bottom: $layout-md;

    .enterprise-section-title {
        @include text-title-md;
        margin: 0 auto $layout-xs;
        max-width: 18em;
        text-align: center;
    }

    @media #{$mq-md} {
        margin-bottom: $layout-xl;

        .enterprise-section-title {
            margin-bottom: $layout-xl;
        }
    }
}

.enterprise-languages {
    text-align: center;
}

// * -------------------------------------------------------------------------- */
// Split

.mzp-c-split.t-enterprise {
    // dark colour fallback incase svg image doesn't load/display
    background-color: $color-ink-80;
    background-image:
        url('/media/img/firefox/enterprise/ent-noodles.svg'),
        linear-gradient(transparent 550px, #fff 550px, #fff 1000px);
    background-position: bottom left, top center;
    background-repeat: no-repeat, repeat-x;
    background-size: 1221px 680px, 480px 1000px;
    margin-bottom: $layout-sm;
    min-height: 540px;
    padding-top: $layout-sm;

    html[dir='rtl'] & {
        background-color: $color-ink-80;
        min-height: 0;
    }

    .mzp-c-split-container {
        // need extra spacing to prevent clipping with the background image
        padding-bottom: $spacing-xl;

        @media #{$mq-md} {
            padding-bottom: inherit;
        }
    }

    .mzp-c-split-body {
        background-color: $color-ink-80;
        border-top-right-radius: 100px;
        margin-bottom: 100px;
        max-width: 580px;
        position: relative;

        .mzp-c-split-title {
            @include text-title-lg;
            margin-bottom: $spacing-md;

            @media #{$mq-md} {
                margin-bottom: $spacing-xl;
            }
        }

        .mzp-c-wordmark {
            margin-left: auto;
            margin-right: auto;

            @media #{$mq-lg} {
                margin-left: 0;
                margin-right: 0;
            }
        }

        .mzp-c-split-desc {
            @include text-body-lg;
            margin-bottom: $spacing-md;

            @media #{$mq-md} {
                margin-bottom: $spacing-2xl;
            }
        }
    }

    @media #{$mq-sm} {
        background-position: top left, top center;
        margin-bottom: $layout-md;
        min-height: 680px - $layout-xl; // to keep bg image from being cut off
        padding-top: $layout-xl;
    }

    @media #{$mq-md} {
        background-image:
            url('/media/img/firefox/enterprise/ent-noodles-wide.svg'),
            linear-gradient(transparent 680px, #fff 680px, #fff 1200px);
        background-position: top center, top center;
        background-repeat: no-repeat, repeat-x, repeat-x;
        background-size: 2560px 793px, 480px 1200px;
        min-height: 793px - $layout-md; // to keep bg image from being cut off
        padding-top: $layout-md;

        html[dir='rtl'] & {
            background: $color-ink-80;
            min-height: 0;
        }
    }
}

// * -------------------------------------------------------------------------- */
// Downloads Section

@supports (display: grid) {
    @media #{$mq-md} {
        .enterprise-download-lists {
            display: grid;
            grid-column-gap: $layout-md;
            grid-template-columns: repeat(3, 1fr);
            grid-template-areas:
                'title-col1    title-col2    title-col3'
                'list-col1     list-col2     list-col3'
                'support-col1  support-col2  support-col3';
            margin-bottom: $layout-md;
        }

        .enterprise-download-block {
            display: contents;
            margin-bottom: 0;
        }

        .platform-win64 {
            .enterprise-download-title {
                grid-area: title-col1;
            }

            .mzp-c-menu-list {
                grid-area: list-col1;
            }

            .enterprise-download-support {
                grid-area: support-col1;
            }
        }

        .platfom-mac {
            .enterprise-download-title {
                grid-area: title-col2;
            }

            .mzp-c-menu-list {
                grid-area: list-col2;
            }

            .enterprise-download-support {
                grid-area: support-col2;
            }
        }

        .platform-win32 {
            .enterprise-download-title {
                grid-area: title-col3;
            }

            .mzp-c-menu-list {
                grid-area: list-col3;
            }

            .enterprise-download-support {
                grid-area: support-col3;
            }
        }
    }
}

.enterprise-download-block {
    margin-bottom: $layout-lg;
}

.enterprise-download-title {
    @include bidi((
        (padding-left, $layout-md, 0),
        (padding-right, 0, $layout-md),
    ));
    @include text-title-xs;
    margin-bottom: $spacing-lg;
    min-height: 40px;
    position: relative;

    &::before {
        @include bidi(((left, 0, right, auto),));
        background-position: center center;
        background-repeat: no-repeat;
        content: '';
        display: block;
        height: 40px;
        position: absolute;
        top: -8px;
        width: 40px;
    }

    .platform-win64 &::before {
        background-image: url('/media/img/firefox/enterprise/icon-win64.svg');
        background-size: 35px 36px;
    }

    .platform-mac &::before {
        background-image: url('/media/img/firefox/enterprise/icon-mac.svg');
        background-size: 29px 36px;
    }

    .platform-win32 &::before {
        background-image: url('/media/img/firefox/enterprise/icon-win32.svg');
        background-size: 35px 36px;
    }
}

.enterprise-download-support {
    padding-top: $spacing-xl;
    margin-top: $spacing-xl;
    border-top: 1px solid $color-marketing-gray-30;
}

.enterprise-download-subtitle {
    @include text-title-2xs;
}
